<!DOCTYPE html>
<html>
  <title>YouTube Content Curator</title>
  {% block css %}{% endblock %}

  {% block nav %}
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="/">YouTube Content Curator {% if campaign_name %}({{campaign_name}}){% endif %}</a>
        <div class="nav-collapse" style="float:right">
          <ul class="nav">
           {% block nav_videos %}<li class="active"><a href="/">Videos</a></li>{% endblock %}
           {% block nav_update %}<li><a href="/profile">Profile</a></li>{% endblock %}
           {% block nav_reporting %}<li><a href="/reporting">Reporting</a></li>{% endblock %}
           <li id="notification_link"><a href="#"><span>0</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  {% endblock %}

<div id="close_block"></div>
<div id="notifications">
  <a href="/audit_trail" class="audit">View all notifications</a>
  <ol id="messages">
  {% for notification in audit_trail %}
    <li>
      {% ifequal notification.action 'curated' %}
      <p><span>{{notification.log_date|date:"H:i"}}</span>{{ notification.user }} {{ notification.action }}</p>
      <a href="/curate_videos?search_videoid={{ notification.videoid }}" class="ytvideo">
        <img src="http://i.ytimg.com/vi/{{ notification.videoid }}/0.jpg" />
        <span>{{ notification.title }}</span>
      </a>
      {% else %}
       <p><span>{{notification.log_date|date:"H:i"}}</span>{{ notification.user }} {{ notification.action }}</p>
        <img width="30px" src="/static/img/{{notification.status}}.png" />
        <span> {{ notification.message|safe }}</span>
      </a>
      {% endifequal %}
    </li>
  {% endfor %}
  </ol>
</div>

  <section id="content" class="container-fluid">
    <section class="row-fluid">
    {% block content %}{% endblock %}
    </section>
  </section>
  {% block main_js_load %}
  <script type="text/javascript" src="/static/js/LAB.min.js"></script>
  <script type="text/javascript">
    $LAB
    .script('//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js').wait()
    .script('/_ah/channel/jsapi')
    .script('//www.google.com/jsapi').wait( function() {
      var channel = new goog.appengine.Channel('{{ channel_id }}')
      var socket = channel.open()
      socket.onopen = function() {}
      socket.onmessage = function(message) {
        //console.log('message!')
        var num = parseInt($('#notification_link').find('span').text());
        //console.log(num)

        $('#notification_link').addClass('new').find('span').text((num+1).toString());
        
        var data = $.parseJSON(message.data);
        console.log(data);
        if (data['action'] == 'curated') {
          var contents = '<p><span></span>' + data['user'] + ' ' + data['action'] +'</p>';
          contents += '<a href="/curate_videos?search_videoid=' + data['videoid'] + '" class="ytvideo">';
          contents += '<img src="http://i.ytimg.com/vi/' + data['videoid']+ '/0.jpg"></img>';
          contents += "<span>" + data["title"] + "</span></a>";
       } else {
          var contents = '<p><span></span>' + data['user'] + ' ' + data['action'] +'</p>';
          contents += '<img width="30px" src="/static/img/' + data['status']+ '.png"></img>';
          contents += "<span> " + data["message"] + "</span></a>";
       }
      
       $('#messages').prepend("<li>" + contents + "</li>");
        
        
      }
      socket.onerror = function() {}
      socket.onclose = function() {}

      // Notifications
      $('#notification_link').click(function(e) {
        e.preventDefault()

        if($('#notifications').is(':visible')) {
          $('#notifications').hide()
          $('#close_block').hide()
        } else {
          $('#notifications').show()
          $('#close_block').show()
        }
        
      })//.trigger('click')
    })
    {% endblock %}
    {% block foot_js_lab %}{% endblock %}
  </script>
  {% block foot_js %}{% endblock %}
</body>
</html>
